<template>
    <div class="nav_bottom">
        <div>
            <img src="../assets/img/icon-indes@2x.png" alt="">
        </div>
        <div v-if="!handleList" @click="handleMessage('custom')">
            <el-badge :value="0" class="item" :hidden="true">
                <img src="../assets/img/icon-customer-service@2x.png" alt="">
            </el-badge>
        </div>
        <div v-if="handleList" @click="handleMessage('custom')">
            <el-badge :value="this.handleList.unreadCount" class="item" :hidden="this.handleList.unreadCount == 0 || !this.token">
                <img src="../assets/img/icon-customer-service@2x.png" alt="">
            </el-badge>
        </div>

        <div @click="handleMessage('shop_car')">
            <el-badge :value="car_num" class="item" :hidden="car_num === 0">
                <img src="../assets/img/icon-indes-shopping cart@2x.png" alt="">
            </el-badge>
        </div>
    </div>
</template>

<script>
    import { getToken } from '../libs/http';
    import {mapState} from "vuex";
    import http from "../libs/http";
    const token = getToken();
    export default {
        name: 'nav_bottom',
        props:['user_id','car_num','shop_id'],
        data(){
            return{
                token
            }
        },
        mounted() {

        },
        computed: {
            ...mapState({
                handleList(state) {
                    let message;
                    for (let i in state.conversation.conversationList) {
                        if (state.conversation.conversationList[i].conversationID === ("C2C" + this.user_id + 'b')) {
                            message = state.conversation.conversationList[i];
                        }
                    }
                    return message
                },
                isSDKReady: state => state.user.isSDKReady,
            })
        },
        methods:{
            handleMessage(path){
                const token = getToken();
                if(token){
                    this.$router.push({
                        name: path,
                        query:{name:'index',id:this.shop_id,user_id:this.user_id,task_order_id:sessionStorage.getItem('task_order_id')}
                    });
                }else{
                    this.$router.push({
                        name: 'login',
                        query:{name:path}
                    });
                }
            }
        },
        mixins:[http]
    }
</script>

<style lang="stylus">
    .nav_bottom
        width 100%;
        height 49px;
        position fixed
        left 0;
        bottom 0;
        display flex;
        background: #fff;
        justify-content: space-around;
        border-top:1px solid #3BC7FF;
        div
            align-self center
            img
                height 31px
            .el-badge
                .el-badge__content
                    top: 4px
                    width 13px
                    height: 13px
                    padding 1px
                    font-size 12px
                    line-height 13px
                    border-radius: 50%
                    background-color #FF0000;



</style>